<template>
  <div v-loading="dataLoading" class="d_container">
    <!--    顶部导航条-->
    <div class="topNav">
      <div>
        <span
          class="back mr10 pointer"
          @click="Back"
        ><i class="el-icon-arrow-left" /> 返回</span>
        <span class="fw">彩稿上传</span>
      </div>
      <div class="orderTopBtn flex mr10">
        <el-button
          v-loading="orderLoading"
          type="primary"
          size="small"
          :disabled="orderLoading"
          @click="saveOrder"
        >保存</el-button>
      </div>
    </div>
    <div class="subTip">
      <span
        class="mr15"
      ><span class="mr5">彩稿单号：</span>{{ productFrom.baseData.colorDraftNo || "系统自动生成" }}</span>
      <span
        class="mr15"
      ><span class="mr5">创建日期：</span>{{ productFrom.baseData.openOrderDate || dayjs().format("YYYY-MM-DD") }}</span>
      <span class="mr15"><span class="mr5">创建人员：</span>{{ productFrom.baseData.salesmanName || name }}</span>
      <span
        class="mr15"
      ><span class="mr5">彩稿状态：</span>{{ productFrom.baseData.colorDraftStateName || '--' }}</span>
    </div>
    <div class="d_mainCenter">
      <el-form
        ref="orderForm"
        label-position="left"
        :model="productFrom"
        :rules="rules"
        label-width="110px"
        class="orderForm"
      >
        <div class="d_left">
          <div class="d_orderDetails m0">
            <div class="item">
              <div class="cTitle">
                <h3>订单信息</h3>
              </div>
              <dl>
                <dt>订单单号</dt>
                <dd>{{ productFrom.orderBaseData.xieYiShuHao || '--' }}</dd>
              </dl>
              <dl>
                <dt>客户单号</dt>
                <dd>{{ productFrom.orderBaseData.customerBillNo || '--'}}</dd>
              </dl>
              <dl>
                <dt>合同号</dt>
                <dd>{{ productFrom.orderBaseData.contractCode || '--'}}</dd>
              </dl>
            </div>
            <div class="item">
              <div class="cTitle">
                <h3>产品信息</h3>
              </div>
              <dl>
                <dt>产品名称</dt>
                <dd>{{ productFrom.orderBaseData.orderProductName || '--' }}</dd>
              </dl>
              <dl>
                <dt>产品编码</dt>
                <dd>
                  {{ productFrom.orderBaseData.productCode || "--" }}
                </dd>
              </dl>
              <dl>
                <dt>产品板面</dt>
                <dd> {{ productFrom.orderBaseData.printingSurface || '--' }}</dd>
              </dl>
              <dl>
                <dt>产品版本</dt>
                <dd> {{ productFrom.orderBaseData.productVersions || '--' }}</dd>
              </dl>
            </div>
            <div class="item">
              <div class="cTitle">
                <h3>业务信息</h3>
              </div>
              <dl>
                <dt>标签套数</dt>
                <dd>{{ productFrom.orderBaseData.taoZhuangQuantity || '--' }}<span class="unit">{{productFrom.orderBaseData.productUnion}}</span></dd>
              </dl>
              <dl>
                <dt>标签枚数</dt>
                <dd>{{ productFrom.orderBaseData.tagSumQuantity || '--' }}<span class="unit">枚</span></dd>
              </dl>
            </div>
            <div class="item">
              <div class="cTitle">
                <h3>数据信息</h3>
              </div>
              <dl>
                <dt>数据来源</dt>
                <dd>{{ productFrom.orderBaseData.dataComeFromName || '--' }}</dd>
              </dl>
              <dl>
                <dt>数据数量</dt>
                <dd>{{ productFrom.orderBaseData.tagDataQuantity || '--' }}</dd>
              </dl>
              <dl>
                <dt>数据状态</dt>
                <dd>{{ productFrom.orderBaseData.dataProduceState || '--' }}</dd>
              </dl>
            </div>
            <div class="item">
              <div class="cTitle">
                <h3>套装关系</h3>
              </div>
              <labelTree :tree-data="productFrom.packageRelations" />
            </div>
            <div class="item">
              <div class="cTitle">
                <h3>产品包装</h3>
              </div>
              <dl>
                <dt>成品样式</dt>
                <dd>{{ productFrom.packageData.productStyleName || '--' }}</dd>
              </dl>
              <dl v-if="productFrom.packageData.productStyle !== 1">
                <dt>出标方向</dt>
                <dd>{{ productFrom.packageData.outDirectionName || '--' }}</dd>
              </dl>
              <dl v-if="productFrom.packageData.productStyle === 2">
                <dt>卷向</dt>
                <dd>{{ productFrom.packageData.scrollDirectionName || '--' }}</dd>
              </dl>
              <dl>
                <dt>贴标方式</dt>
                <dd>{{ productFrom.packageData.tagAffixWayName || '--' }}</dd>
              </dl>
              <dl v-if="productFrom.packageData.productStyle === 2">
                <dt>卷芯大小</dt>
                <dd> {{ productFrom.packageData.mandrelSize || '--' }}<span class="unit">mm</span></dd>
              </dl>
              <dl v-if="productFrom.packageData.productStyle === 2">
                <dt>外直径不超过</dt>
                <dd>{{ productFrom.packageData.notOverDiameter || '--' }}<span class="unit">mm</span></dd>
              </dl>
              <dl v-if="productFrom.packageData.productStyle === 2">
                <dt>每卷等于</dt>
                <dd>{{ productFrom.packageData.pageEqualTags || '--' }}<span class="unit">{{productFrom.orderBaseData.productUnion}}</span></dd>
              </dl>
              <dl v-if="productFrom.packageData.productStyle !== 2">
                <dt>每张等于</dt>
                <dd>{{ productFrom.packageData.pageEqualTags || '--' }}<span class="unit">{{productFrom.orderBaseData.productUnion}}</span></dd>
              </dl>
              <dl v-if="productFrom.packageData.productStyle !== 2">
                <dt>每包等于</dt>
                <dd>{{ productFrom.packageData.packageEqualPages || '--' }}<span class="unit">张</span></dd>
              </dl>
              <dl>
                <dt>每箱等于</dt>
                <dd>{{ productFrom.packageData.boxEqualPackages || '--' }}<span class="unit">{{ productFrom.packageData.productStyle !== 2 ? "包" : "卷" }}</span></dd>
              </dl>
              <dl>
                <dt>每箱共计</dt>
                <dd>{{ productFrom.packageData.boxEqualTags || '--' }}<span class="unit">{{productFrom.orderBaseData.productUnion}}</span></dd>
              </dl>
            </div>
            <div class="item">
              <div class="cTitle">
                <h3>订单备注</h3>
              </div>
              <div class="d_remark">
                {{ productFrom.orderBaseData.orderRemark }}
              </div>
            </div>
            <div class="item">
              <div class="cTitle">
                <h3>其他信息</h3>
              </div>
              <dl>
                <dt>业务员</dt>
                <dd>{{ productFrom.orderBaseData.salesmanName || '--' }}</dd>
              </dl>
              <dl>
                <dt>联系电话</dt>
                <dd>{{ productFrom.orderBaseData.salesmanMobile || '--' }}</dd>
              </dl>
            </div>
          </div>
        </div>
        <div class="d_tag">
          <div class="cTitle">
            <h3>标签信息</h3>
          </div>
          <div class="tagCon">
            <template v-for="item in productFrom.orderTagDataList">
              <div :key="item.productTagCode" class="tagList">
                <div class="listNav flex">
                  <span class="pointer tagright" @click="shrink(item)">
                    <i v-if="!item.isShow" class="el-icon-arrow-down" />
                    <i v-else class="el-icon-arrow-up" />
                  </span>
                  <span class="f16 fw">{{ item.productTagName }}</span>
                </div>
                <div v-if="!item.isShow" class="tagShow">
                  <div class="tagsinfo formItem">
                    <el-row :gutter="20">
                      <!-- <el-col :span="12">
                        <el-form-item label="标签名称:">
                          {{ productFrom.orderBaseData.orderNo }}
                        </el-form-item></el-col>
                      <el-col :span="12">
                        <el-form-item label="标签数量:">
                          {{ productFrom.orderBaseData.orderNo }}
                        </el-form-item></el-col> -->
                      <el-col v-if="item.tagShapeName" :span="12">
                        <el-form-item label="标签形状:">
                          <span>{{ item.tagShapeName }}</span>
                        </el-form-item></el-col>
                      <el-col v-if="item.tagWidth || item.tagHeight" :span="12">
                        <el-form-item label="标签尺寸:">
                          <span v-if="item.tagWidth && item.tagHeight">{{
                            item.tagWidth + "*" + item.tagHeight
                          }}mm</span>
                        </el-form-item></el-col>
                      <el-col v-if="item.tagBorderRadius" :span="12">
                        <el-form-item label="R角:">
                          <span v-if="item.tagBorderRadius">{{
                            item.tagBorderRadius + "mm"
                          }}</span>
                        </el-form-item></el-col>
                      <el-col v-if="item.tagBorder" :span="12">
                        <el-form-item label="边空:">
                          <span v-if=" item.tagBorder">{{ item.tagBorder + "mm" }}</span>
                        </el-form-item></el-col>
                      <el-col :span="12">
                        <el-form-item v-if="item.tagTypeName" label="标签类型:">
                          <span>{{ item.tagTypeName }}</span>
                        </el-form-item></el-col>
                      <el-col v-if="item.postedContent" :span="12">
                        <el-form-item label="被贴物:">
                          <span>{{ item.postedContent }}</span>
                        </el-form-item></el-col>
                    </el-row>
                    <div v-for="item2 in item.layerDataList" :key="item2.layerClientCode">
                      <div class="mt5">
                        <h3>{{ item2.printingLayerName }}</h3>
                      </div>
                      <el-row :gutter="20">
                        <el-col v-if="item2.printingMaterialName" :span="12">
                          <el-form-item label="材料:">
                            {{ item2.printingMaterialName }}
                          </el-form-item></el-col>
                        <el-col v-if="item2.surfaceRequireNameList.length && item2.surfaceRequireNameList.length > 0" :span="12">
                          <el-form-item label="表面要求:">
                            {{ item2.surfaceRequireNameList.join() }}
                          </el-form-item></el-col>
                        <el-col v-if="item2.baseFilmColorName" :span="12">
                          <el-form-item label="底膜颜色:">
                            {{ item2.baseFilmColorName }}
                          </el-form-item></el-col>
                        <el-col v-if="item2.scrapingCoatingColorName" :span="12">
                          <el-form-item label="刮开涂层:">
                            {{ item2.scrapingCoatingColorName }}
                          </el-form-item></el-col>
                        <el-col v-if="item2.scrapingWordColorName" :span="12">
                          <el-form-item label="刮开文字:">
                            {{ item2.scrapingWordColorName }}
                          </el-form-item></el-col>
                        <el-col v-if="item2.technoPlaces" :span="12">
                          <el-form-item label="数码位数:">
                            {{ item2.technoPlaces }}
                          </el-form-item></el-col>
                          <el-col v-if="item2.barCodePlaces" :span="12">
                            <el-form-item label="条码位数:">
                              {{ item2.barCodePlaces }}
                            </el-form-item></el-col>
                          <!-- <el-col v-if="item2.technoPlaces" :span="12">
                            <el-form-item label="数码位数:">
                              {{ item2.technoPlaces }}
                            </el-form-item></el-col> -->
                        <el-col :span="12">
                          <el-form-item label="数码颜色:">
                            {{ item2.technoColor ==0?"黑码":"彩码" }}
                          </el-form-item></el-col>
                        <el-col v-if="item2.liuJiaoTextureName" :span="12">
                          <el-form-item label="留胶材质:">
                            {{ item2.liuJiaoTextureName }}
                          </el-form-item></el-col>
                      </el-row>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
        <div class="d_content not">
          <div class="cTitle">
            <h3>彩稿信息</h3>
          </div>
          <div class="tagsBox">
            <el-row class="w100">
              <el-col>
                <div class=" pic-left">
                  <div class="colorPic flex flex_center">
                    <div
                      v-if="picList && picList.length > 0"
                      class="flex  w100 flex_wrap "
                    >
                      <div v-for=" (imgsrc, index) in picList" :key="imgsrc.draftFilePreviewUrl" class="img_c">
                        <div v-show="imgsrc.colorDraftTypeName" class="text">
                          {{ imgsrc.colorDraftTypeName }}
                        </div>
                        <div
                          class="yulan flex-column-center pointer"
                          @click="previewColor(imgsrc.draftFilePreviewUrl)"
                        >
                          <i class="iconfont yulanIco" />
                        </div>
                        <div
                          class="delete flex-column-center pointer"
                          @click="deleteColor(imgsrc, index)"
                        >
                          <i class="iconfont DeleteIco" />
                        </div>
                        <el-image-viewer
                          v-show="isShadeShow"
                          :initial-index="0"
                          :on-close="onClose"
                          :url-list="getUrlList"
                        />
                        <img
                          class="img_i"
                          :src="imgsrc.draftFilePreviewUrl"
                          alt=""
                        >
                      </div>
                    </div>
                    <el-empty v-else description="暂无彩稿图" />
                  </div>
                </div></el-col>
              <el-col :span="8">
                <el-upload
                  class="pic-uploader"
                  action=" "
                  :show-file-list="false"
                  :http-request="myUpload"
                >
                  <el-button
                    class="w100"
                    type="primary"
                  ><i
                    class="el-icon-upload el-icon--right"
                  />上传合板彩稿</el-button>
                </el-upload>
              </el-col>

            </el-row>
          </div>
          <div class="cTitle flex flex_between">
            <h3>颜色信息</h3>
            <span
              class="c_3F61F1 pointer"
              @click="handleSelectColor"
            ><i class="iconfont xinjian" /> 添加颜色</span>
          </div>
          <div class="tableBox">
            <!-- <div class="tt flex flex_between">
              <span class="fw">印刷颜色</span>
              <span
                class="c_3F61F1 mr15 pointer"
                @click="showColor = true"
              ><i class="el-icon-plus mr5" /> 选择</span>
            </div> -->
            <div ref="tableCon" class="bigdialogTbCon">
              <el-table
                :data="productFrom.printColorList"
                border
                style="width: 100%"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="100"
                />
                <el-table-column
                  prop="colorTypeName"
                  label="颜色类型"
                  width="110"
                >
                <template slot-scope="{ row }">
                    <el-select
                        filterable
                      v-model="row.colorType"
                      placeholder="请选择颜色类型"
                      size="mini"
                    >
                      <el-option label="普通" value="1" />
                      <el-option label="专色" value="2" />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  label="颜色名称"
                  prop="colorName"
                  width="110"
                >
                <template slot-scope="{ row }">
                    <el-input
                      v-model="row.colorName"
                      placeholder="请输入"
                      size="mini"
                      :disabled="canDisablle"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  label="参考"
                  prop="colorReference"
                  show-overflow-tooltip
                  width="150"
                >
                  <template slot-scope="{ row }">
                    <el-select
                        filterable
                      v-model="row.colorReference"
                      placeholder="请选择参考"
                      size="mini"
                    >
                      <el-option label="封样" :value="3" />
                      <el-option label="样标" :value="2" />
                      <el-option label="彩稿" :value="1" />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  label="备注"
                  show-overflow-tooltip
                  min-width="150"
                  prop="colorRemark"
                >
                  <template slot-scope="{ row }">
                    <el-input
                      v-model="row.colorRemark"
                      placeholder="请输入"
                      size="mini"
                      :disabled="canDisablle"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  fixed="right"
                  show-overflow-tooltip
                  width="80"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-tooltip
                      v-show="!canDisablle"
                      class="item"
                      effect="dark"
                      content="删除"
                      placement="right-start"
                    >
                        <span
                          class="pointer"
                          @click="deleteRow(scope.row, scope.$index)"
                        ><i
                          class="el-icon-delete"
                        /></span>
                    </el-tooltip>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="cTitle flex flex_between">
            <h3>彩稿备注</h3>
          </div>
          <div class="maskBox">
            <el-input
              v-model="productFrom.baseData.uploadRemark"
              placeholder="请输入内容"
              type="textarea"
              :rows="5"
            /></div>
        </div>
      </el-form>
    </div>
    <!-- 遮罩div   -->
    <!-- <div
      v-if="isShadeShow"
      class="shadeBox flex-column-center"
      @click="colosrSheBox"
    >
      <span
        class="colseShadebox pointer"
        @click="colosrSheBox"
      ><i
        class="el-icon-error"
      /></span>
      <img :src="colorImagUrl" alt="">
    </div> -->

    <!--彩稿颜色 -->
    <el-dialog
      append-to-body
      title="选择颜色"
      :visible.sync="isSemidialog"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog"
      width="70%"
      @close="closeSemiDialog"
      @open="opanColor"
    >
      <div class="dialogDody marDialog flex flex_column">
        <div class="btnCon flex flex_between">
          <!--      搜索框-->
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-plus"
            @click="addPackge"
          >新建</el-button>
          <div class="search">
            <el-input
              v-model="SemiSearch.likeWords"
              placeholder="输入关键字"
              size="small"
            >
              <el-button
                slot="append"
                :loading="marLoading"
                type="primary"
                icon="el-icon-search"
                :disabled="marLoading"
                element-loading-spinner="el-icon-loading"
                @click="openmater"
              >
                搜索
              </el-button>
            </el-input>
          </div>
        </div>

        <!--    高级搜索版块-->
        <div class="seniorSearch flex flex_between">
          <div>
            <el-radio-group
              v-model="SemiSearch.colorType"
              size="mini"
              @change="changeExclusive"
            >
              <el-radio-button label="0">全部</el-radio-button>
              <el-radio-button label="1">普通</el-radio-button>
              <el-radio-button label="2">专色</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <!-- 表格区域       -->
        <div class="tableCon not">
          <el-table
            :data="colorList"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column prop="selection" width="55">
              <el-table-column
                type="selection"
                width="55"
              />
              <el-table-column prop="colorName" label="颜色名称" />
              <el-table-column prop="colorTypeName" label="类型" />
              <el-table-column prop="cmykValue" label="CMYK值" />
              <el-table-column prop="colorValue" label="HEX/HTML值" />
              <el-table-column prop="colorRemark" label="备注" />
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="closeSemiDialog()">取 消</el-button>
        <!-- 选择 -->
        <el-button
          v-loading="addLoading"
          :disabled="addLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="saveColorManuscript"
        >
          确定</el-button>
      </div>
    </el-dialog>
    <!-- 新建颜色   -->
    <el-dialog
      :title="'新增颜色'"
      :visible.sync="isAddMaterriel"
      :close-on-click-modal="false"
      custom-class="comDialog "
      width="30%"
      @close="closeDialog"
    >
      <div class="dialogDody">
        <div class="addWuliaoBox">
          <el-form
            ref="materForm"
            :model="materForm"
            :rules="materFormRules"
            :label-position="'left'"
            label-width="120px"
            class="dialogForm dialogInlineForm"
          >
            <el-row>
              <el-col>
                <el-form-item label="颜色编号">
                  <el-input
                    v-model="materForm.colorCode"
                    placeholder="系统自动生成"
                    size="mini"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="颜色名称" prop="colorName">
                  <el-input v-model="materForm.colorName" size="mini" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="颜色类型" prop="colorType">
                  <el-select
                        filterable v-model="materForm.colorType" placeholder="请选择 颜色类型" size="mini">
                    <el-option
                      v-for="item in colorTypetList"
                      :key="item.colorTypetNo"
                      :label="item.colorTypeName"
                      :value="item.colorTypetNo"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="CMYK值" prop="cmykValue">
                  <el-input
                    v-model="materForm.cmykValue"
                    placeholder="用逗号隔开, 如(c100,k100)"
                    size="mini"
                  />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="HEX/HTML值" prop="colorValue">
                  <el-input
                    v-model="materForm.colorValue"
                    size="mini"
                    placeholder="如#ffffff"
                    class="color-select"
                  ><el-color-picker slot="append" v-model="materForm.colorValue" size="mini" />
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="排序" prop="colorSort">
                  <el-input
                    v-model="materForm.colorSort"
                    onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
                    size="mini"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="备注" prop="colorRemark" class="inlineText mt5">
              <el-input
                v-model="materForm.colorRemark"
                type="textarea"
                placeholder="请输入备注"
                size="mini"
                clearable
              />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isAddMaterriel = false">取 消</el-button>
        <el-button
          v-loading="addMaterrielLoading"
          :disabled="addMaterrielLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="reSaveMater"
        >继续新增</el-button>
        <!--  新建保存      -->
        <el-button
          v-loading="addMaterrielLoading"
          :disabled="addMaterrielLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="saveMater"
        >保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import labelTree from '@/components/labelTree'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import { mapGetters } from 'vuex'

export default {
  name: '',
  components: { labelTree, ElImageViewer },
  computed: {
    ...mapGetters(['name']),
    getUrlList() {
      const ur = []
      this.picList.forEach((e) => {
        ur.push(e.draftFilePreviewUrl)
      })
      // this.$nextTick(() => {
      //   this.urlList = ur
      // })
      return ur
    }
  },
  data() {
    return {
      picList: [],
      colorList: [],
      urlList: [],
      SemiSearch: {
        pageIndex: 1,
        pageSize: 100,
        likeWords: '',
        colorType: 0,
        useType: 2
      },

      colorForm: {
        productCode: "", //订单产品代码
        colorList: [],
      },
      multipleSelection: null,
      isSemidialog: false,
      isAddMaterriel: false,
      currentItem: null,
      canDisablle: false,
      isShadeShow: false,
      marLoading: false,
      addLoading: false,
      isMarterdialog: false,
      showColor: false, // 选择物料
      orderNo: '', // 订单号
      loading: null,
      colorTypetList: [
        { colorTypeName: '普通', colorTypetNo: 1 },
        { colorTypeName: '专色', colorTypetNo: 2 }
      ],
      dataLoading: false, // 订单详情数据加载
      orderLoading: false, // 订单保存加载效果
      materForm: {
        colorSort: 1000,
        colorType: '',
        useType: 2
      },
      materFormRules: {
        colorName: [{ required: true, message: '请输入颜色名称', trigger: 'blur' }],
        colorType: [{ required: true, message: '请选择颜色类型', trigger: 'blur' }]
      },
      productFrom: {
        baseData: {},
        packageData: {},
        orderBaseData: {},
        mxDataList: [{}],
        orderTagDataList: [{}]
      },
      addMaterrielLoading: false,
      isDisable: false, // 是否禁用输入框
      typeStatus: 0,
      rules: {}
    }
  },

  created() {
    if (this.$route.query.add) {
      this.getOrderDetail()
    } else {
      this.getOrderDetailforOrder()
    }
    // this.getTypeStatus()
    this.loading = this.$loading({
      lock: true,
      text: '数据加载中',
      spinner: 'el-icon-loading',
      fullscreen: true,
      background: 'rgba(0, 0, 0, 0.7)'
    })
  },
  deactivated() {
    // localStorage.removeItem('orderInit')
  },
  beforeDestroy() {
    // localStorage.removeItem('orderInit')
  },
  mounted() {
    // this.setSort()
    this.calHeight()
    this.productFrom.printColorList = []
  },
  methods: {
    // 表格最大高度
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.tableCon.getBoundingClientRect()
        this.tableHeight = rect.height
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteRow(row, index) {
      this.productFrom.printColorList.splice(index, 1)
    },
    saveColorManuscript() {
      const array = JSON.parse(JSON.stringify(this.productFrom.printColorList))
      const arr = JSON.parse(JSON.stringify(this.multipleSelection))
      arr.forEach((item)=>{
        item.colorReference = 1
      })
      // arr.forEach(item => {
      //   item.applyGetQuantity = item.planUseQuantity
      //   item.getMaterialRemark = ''
      // })
      this.productFrom.printColorList = arr.reduce((result, item) => {
        const val = result.some(({ colorCode }) => colorCode === item.colorCode)
        if (!val) {
          item.useType = 2 // 彩稿颜色
          result.push(item)
        }
        return result
      }, array)
      console.log(this.productFrom.printColorList)
      this.closeSemiDialog()
    },
    changeExclusive() {
      this.openmater()
    },
    closeSemiDialog() {
      this.isSemidialog = false
    },

    //选择颜色
    handleSelectColor(){
      this.productFrom.printColorList.push({
        productCode:'',
        productTagCode:'',
        colorCode:'',
        colorReference:'',
        colorRemark:'',
        colorName:'',
        colorType:''
      })
    },
    // 规格列表
    openmater() {
      const parmas = this.SemiSearch
      this.marLoading = true
      this.$api.business
        .QueryPrintingColorDataList(parmas)
        .then((res) => {
          this.colorList = res
          this.marLoading = false
        })
        .catch(() => {
          this.marLoading = false
        })
    },
    opanColor() {
      this.SemiSearch = {
        pageIndex: 1,
        pageSize: 100,
        likeWords: '',
        useType: 2,
        colorType: 0
      }
      this.openmater()
    },
    // 删除某个彩稿文件
    deleteColor(item, index) {
      const { orderNo } = this.productFrom.orderBaseData
      const { colorDraftNo, draftFileID } = item
      const _data = { orderNo, colorDraftNo, draftFileID }
      if (item.draftFileID) {
        this.$confirm('是否删除该文件?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          this.$api.business.DeleteColorDraftFile(_data).then((res) => {
            this.picList.splice(index, 1)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
        })
      } else {
        this.picList.splice(index, 1)
      }
    },
    // 新建颜色关闭
    closeDialog() {
      if (this.$refs.materForm) {
        this.$refs.materForm.resetFields()
      }
      this.materForm = this.$options.data().materForm
      // this.isAddMaterriel = false
    },
    //
    addPackge() {
      this.isAddMaterriel = true
    },
    // 继续新增
    reSaveMater() {
      const parmas = Object.assign(this.materForm, {})
      parmas.colorSort = Number(parmas.colorSort)
      this.$refs.materForm.validate((valid) => {
        if (valid) {
          this.addMaterrielLoading = true
          this.$api.system
            .AddPrintingColor(parmas)
            .then(() => {
              this.addMaterrielLoading = false
              this.materForm = {
                colorSort: 1000,
                colorType: ''
              }
              this.openmater()
              this.$message({
                message: '保存成功',
                type: 'success'
              })
            })
            .catch(() => {
              this.addMaterrielLoading = false
            })
        }
      })
    },
    // 保存
    saveMater() {
      const parmas = Object.assign(this.materForm, {})
      parmas.colorSort = Number(parmas.colorSort)
      this.$refs.materForm.validate((valid) => {
        if (valid) {
          this.addMaterrielLoading = true
          this.$api.system
            .AddPrintingColor(parmas)
            .then(() => {
              this.isAddMaterriel = false
              this.addMaterrielLoading = false
              this.openmater()
              this.$message({
                message: '保存成功',
                type: 'success'
              })
            })
            .catch(() => {
              this.addMaterrielLoading = false
            })
        }
      })
    },
    // 彩稿上传
    myUpload(e) {
      const file = e.file
      const type = file.name.substring(file.name.lastIndexOf('.') + 1)
      if (
        type !== 'png' &&
        type !== 'jpg' &&
        type !== 'jpeg' &&
        type !== 'gif' &&
        type !== 'bmp'
      ) {
        this.$message.error('上传图片格式错误，请重新上传!')
        return false
      } else {
        var formData = new FormData()
        formData.append('file', file)
        this.$api.common.UploadSingleFile(formData).then((res) => {
          res.draftFilePreviewUrl = res.fileFullUrl
          this.picList.push(res)
          if (!this.currentItem) {
            this.currentItem = res
          }
        })
      }
    },
    // 预览彩稿
    previewColor(url) {
      this.isShadeShow = true
      this.colorImagUrl = url
    },
    onClose() {
      this.isShadeShow = false
    },
    colosrSheBox() {
      this.isShadeShow = false
    },
    getOrderDetail() {
      const parmas = {
        draftID: this.$route.query.draftID,
        colorDraftNo: this.$route.query.colorDraftNo
      }
      this.$api.business
        .QueryColorDraftDetail(parmas)
        .then((res) => {
          this.productFrom = res
          this.picList = res.files
          this.loading.close()
        })
        .catch(() => {
          this.loading.close()
        })
    },
    // 获取订单详情
    getOrderDetailforOrder() {
      const parmas = {
        saleOrderNo: this.$route.query.saleOrderNo
      }
      this.$api.business
        .GetSaleOrderDataByOrderNo(parmas)
        .then((res) => {
          this.productFrom = res
          this.picList = res.files
          this.loading.close()
        })
        .catch(() => {
          this.loading.close()
        })
    },
    // 保存
    saveOrder() {
      this.orderLoading = true
      this.picList.forEach(e => {
        e.uploadFileDate = e.uploadDate
        e.uploadFileName = e.fileName
      })

      const { orderNo, agreementNo, productCode } = this.productFrom.orderBaseData
      const { uploadRemark, colorDraftNo } = this.productFrom.baseData
      const _coloList = []
      this.picList.forEach(e => {
        e.productTagCode = ''
      })

      this.productFrom.printColorList.forEach(e => {
        e.productCode = productCode
      })
      for (let index = 0; index < this.productFrom.printColorList.length; index++) {
        for (let index2 = 0; index2 < this.productFrom.orderTagDataList.length; index2++) {
          const a = this.productFrom.printColorList[index]
          const _d = JSON.parse(JSON.stringify(a))
          _d.productTagCode = this.productFrom.orderTagDataList[index2].productTagCode
          _coloList.push(_d)
        }
      }
      const _data = {
        orderNo: orderNo,
        productCode:productCode,
        agreementNo: agreementNo,
        uploadRemark: uploadRemark,
        uploadFiles: this.picList,
        printColorList: _coloList,
      }
      if (this.$route.query.add) {
        _data.uploadFiles.forEach(e => {
          if(e.draftFileID){
            e.dealAction = 'edit'
          }else{
            e.dealAction = 'add'
            e.draftFileID = 0
          }
        })
        _data.colorDraftNo = colorDraftNo
        this.productFrom.orderTagDataList.forEach((item) => {
        this.productFrom.printColorList.forEach((i) => {
            this.colorForm.colorList.push({
              productTagCode: item.productTagCode, //产品标签代码
              colorCode: i.colorCode, //	颜色代码
              colorReference: i.colorReference, //颜色参考：1彩稿；2样表；3封样
              colorRemark: i.colorRemark, //颜色备注
            });
        });
      });
      this.colorForm.productCode =
        this.productFrom.orderBaseData.productCode;
        // this.$api.business
        // .SaveProductTagPrintColors(this.colorForm)
        // .then(() => {});
        this.$api.business.UpdateColorDraftBill(_data).then((res) => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.orderLoading = false
          this.Back()
        }).catch((err)=>{
          this.orderLoading = false
        })
      } else {
        this.productFrom.orderTagDataList.forEach((item) => {
        this.productFrom.printColorList.forEach((i) => {
            this.colorForm.colorList.push({
              productTagCode: item.productTagCode, //产品标签代码
              colorCode: i.colorCode, //	颜色代码
              colorReference: i.colorReference, //颜色参考：1彩稿；2样表；3封样
              colorRemark: i.colorRemark, //颜色备注
            });
        });
      });
      this.colorForm.productCode =
        this.productFrom.orderBaseData.productCode;
        // this.$api.business
        // .SaveProductTagPrintColors(this.colorForm)
        // .then(() => {});
        this.$api.business.CreateColorDraftBill(_data).then((res) => {
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
          this.orderLoading = false
          this.Back()
        }).catch((err)=>{
          this.orderLoading = false
        })
      }
    },
    // 控制标签内容层显示隐藏
    shrink(item) {
      this.$set(item, 'isShow', !item.isShow)
    },
    // 右侧tab切换
    tabChange(index) {
      this.tabsIndex = index
    },
    // 计算产品包装，每箱共计多少枚
    getBoxEqualTags() {
      const pageEqualTagsNum = Number(
        this.productFrom.packageData.pageEqualTags
      )
      const packageEqualPagesNum = Number(
        this.productFrom.packageData.packageEqualPages
      )
      const boxEqualPackagesNum = Number(
        this.productFrom.packageData.boxEqualPackages
      )
      if (this.productFrom.packageData.productStyle !== 2) {
        this.productFrom.packageData.boxEqualTags =
          pageEqualTagsNum * packageEqualPagesNum * boxEqualPackagesNum
      } else {
        this.productFrom.packageData.boxEqualTags =
          pageEqualTagsNum * boxEqualPackagesNum
      }
    },
    // 初始化订单数据
    getInitOrder(oldOrderNo) {},
    // 返回
    Back() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
<style lang="scss">
.el-loading-mask {
  top: 0;
}
</style>
